import React, { Component } from "react";
import { NavBar, Icon } from 'antd-mobile';
import { Tabs } from 'antd-mobile';
import { Accordion } from 'antd-mobile';

const tabs = [
    { title: '注册'},
    { title: '实名'},
    { title: '银行卡'},
    { title: '手机'},
    { title: '登录'},
    { title: '密码'}
];

export default class HelpCenter extends Component {
    state = {
        disabled: false,
    }

    onChange = (key) => {
        console.log(key);
    }

    render() {
        return (
            <div className="helpCenter-div">
                <div>
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.location.href = '#/terran/helpCenter'}
                        rightContent={[
                            <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                            <Icon key="1" type="ellipsis" />,
                        ]}
                    >帮助中心</NavBar>
                </div>

                <div>
                    <h2>&nbsp;开户相关问题</h2>
                    <Tabs tabs={tabs}
                        initialPage={0}
                        onChange={(tab, index) => { console.log('onChange', index, tab); }}
                        onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                    >
                        <div className="注册">
                            <div style={{ marginTop: 10, marginBottom: 10 }}>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="1. 在恩亿优基金开户安全吗？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：恩亿优基金是恩亿优财富旗下的基金交易平台，恩亿优财富成立于2020年，是国内领先的第三方财富管理公司，也是第一批拿到证监会颁发的基金销售牌照的第三方销售平台，受证监会监管，资金由银行监管。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="2. 一个人可以开通多个基金账户吗？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：同一个基金公司只能开通一个基金账户,但是可以在不同的基金公司分别开通账户。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="3. 我没有身份证，用护照、港澳通行证或者军官证等可以开户吗？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：好买目前线上仅支持身份证开户，护照、港澳通行证、台胞证支持线下开户，其他证件暂时不支持开户。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="4. 我之前的账户注销了可以重新开户吗？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：销户之后是可以再次开户的，开户后也支持销户。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="5. 开户过程中为什么要填写真实姓名？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：开立一个基金账户，需要投资者提供真实有效的身份信息。开户过程中需要验证投资者的身份信息并关联银行卡，为避免验证失败，所以必须填写真实姓名。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                            </div>
                        </div>

                        <div className="实名">
                            <div style={{ marginTop: 10, marginBottom: 10 }}>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="1. 实名认证怎么做？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：按照界面提示操作，输入实名信息即可完成实名认证。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                            </div>
                        </div>

                        <div className="银行卡">
                            <div style={{ marginTop: 10, marginBottom: 10 }}>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="1. 一个账户可以绑定多张银行卡吗？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：可以。本平台支持绑定多张银行卡。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="2. 我的银行卡丢了，可以换卡吗？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：为了您的资产安全，目前恩亿优仅提供线下换卡业务。如果您该张银行卡在恩亿优已经没有基金份额了，通过恩亿优基金app登录您的基金交易账户，点击“我的”—“我的账户”—“银行卡”，选择您需要操作的银行卡直接将其注销即可。如果您该张银行卡在好买仍然有基金份额，请直接联系在线客服进行咨询。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="3. 怎样注销银行卡？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：通过恩亿优基金app登录您的基金交易账户，点击“我的”—“我的账户”—“银行卡”，选择您需要操作的银行卡直接将其注销即可。您所选支付银行卡有以下情况之一，将不能进行注销银行卡。1、有基金份额。2、存在在途交易（认购、申购、赎回、转换、定投协议等）。3、存在在途权益（赎回款、分红款等）。4、当前工作日已经进行过变更银行卡或变更支行操作。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="4. 银行卡额度怎么升级？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：登录恩亿优基金app账户，点击“我的”—“我的账户”—“银行卡”，如果您有看到“额度升级”，请单击后根据页面提示操作即可；如果没有则表示该银行卡暂时无法进行额度升级。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                            </div>
                        </div>

                        <div className="手机">
                            <div style={{ marginTop: 10, marginBottom: 10 }}>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="1. 我更换了手机号码，要怎么在好买基金进行修改？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：登录恩亿优基金app，点击“我的”—“我的账户”—“手机号”即可进行修改。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                            </div>
                        </div>

                        <div className="登录">
                            <div style={{ marginTop: 10, marginBottom: 10 }}>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="1. 手势密码连续输入错误5次手势密码还能登录账号吗？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：连续输错5次手势密码时会退出登录，需要您重新输入账号密码，成功登录后重新设置手势密码。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="2. 登录密码多次输错提示账户被锁了怎么办？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：账户被锁是由于您多次错误输入登录密码，一般需要2个小时自动解锁，建议您2个小时之后重新尝试登录，在这期间请不要进行任何操作，否则可能会被继续锁定48小时。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="3. 目前恩亿优可以通过哪些方式进行登录？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：恩亿优目前支持通过已验证的手机号或者已实名的证件号登录账户。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                            </div>
                        </div>

                        <div className="密码">
                            <div style={{ marginTop: 10, marginBottom: 10 }}>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="1. 在哪里修改登录密码？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：通过恩亿优基金app，点击“我的”—“我的账户”—“登陆密码”，按照提示操作即可重置密码。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="2. 在哪里修改交易密码？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：通过恩亿优基金app，点击“我的”—“我的账户”—“交易密码”，按照提示操作即可重置密码。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="3. 手机号不用了，登录密码也忘了，现在没办法修改密码了怎么办？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：请您先联系在线客服办理更换手机号码业务，办理完成后即可重置密码。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                                <Accordion defaultActiveKey="" className="my-accordion" onChange={this.onChange}>
                                    <Accordion.Panel header="4. 交易密码的设置规则是什么？" className="pad">
                                        <div style={{ marginTop: 10, marginLeft: 20, marginBottom: 10, marginRight: 10, color: "#999999" }}>
                                            答：交易密码由6位数字组成，建议您设置时勿使用生日、多位连续数字或重复数字等容易破解的密码。
                                        </div>
                                    </Accordion.Panel>
                                </Accordion>
                            </div>
                        </div>
                    </Tabs>
                </div>
            </div>
        );
    }
}
